<template>
  <div class="center">
    <!--  主页左视图区域  -->
    <div class="left2">
      <dv-border-box-10>
        <left2/>
      </dv-border-box-10>
    </div>
    <div class="left3">
      <dv-border-box-10>
        <left3/>
      </dv-border-box-10>
    </div>
    <!--  主页中心区域  -->
    <div class="centre">
      <p>驾驶员异常行为警告</p>
      <dv-decoration-5 style="width:320px;height:40px;position: absolute;left: 100px;top: 20px"/>
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
    <!--  主页右视图区域  -->
    <div class="right1">
      <dv-border-box-10>
        <right1/>
      </dv-border-box-10>
    </div>
    <div class="right2">
      <dv-border-box-10>
        <dv-decoration-7 style="width:250px;height:30px; color: #fff;position:absolute;left: 80px;top: 10px;">
          委派任务完成排行榜
        </dv-decoration-7>
        <dv-scroll-ranking-board
            :config="config" style="width:400px;height:280px;
          position:absolute;left: 10px;top: 30px"/>
      </dv-border-box-10>
    </div>
    <!--  主页下视图区域  -->x
    <div class="left1">
      <dv-decoration-2 :reverse="true" style="width:5px;height:380px;position: absolute;left: -55px;top: 30px;"/>
      <dv-border-box-11 title="驾驶行为警告次数图">
        <left1/>
      </dv-border-box-11>
      <dv-decoration-2 :reverse="true" style="width:5px;height:380px;position: absolute;right: -55px;top: 30px;"/>
    </div>
  </div>
</template>
<script>
import left1 from "@/components/Examples/Welcome/left1";
import left2 from "@/components/Examples/Welcome/left2";
import left3 from "@/components/Examples/Welcome/left3";
import right1 from "@/components/Examples/Welcome/right1";

export default {
  data() {
    return {
      config: {
        data: [
          {
            name: '曾小贤',
            value: 55
          },
          {
            name: '张伟',
            value: 120
          },
          {
            name: '关谷神奇',
            value: 78
          },
          {
            name: '吕子乔',
            value: 66
          },
          {
            name: '陆展博',
            value: 80
          },
          {
            name: '胡一菲',
            value: 45
          },
          {
            name: '诸葛大力',
            value: 29
          }
        ]
      }
    }
  },
  components: {
    left1,
    left2,
    left3,
    right1
  },
  mounted() {
  },
  methods: {}
}
</script>

<style Lang="less" scoped>
.left1 {
  position: absolute;
  top: 120%;
  height: 420px;
  width: 1220px;
  left: 10%;
}

.left2 {
  position: absolute;
  width: 460px;
  height: 320px;
}

.left3 {
  position: absolute;
  top: 60%;
  width: 460px;
  height: 320px;
}

.centre {
  position: absolute;
  left: 34%;
  width: 530px;
  //height: 670px;
}

.centre p {
  position: absolute;
  top: -30px;
  left: 150px;
  font-size: 25px;
  color: #fff;
}

.right1 {
  position: absolute;
  right: 20px;
  width: 420px;
  height: 330px;
}

.right2 {
  position: absolute;
  right: 20px;
  top: 61%;
  width: 420px;
  height: 320px;
}
</style>
